<!-- 书签管理 -->

<template>
  <div class="modal-wrap">
    <div class="modal-container">
      <!-- Header -->
      <div class="modal-header">
        <span>添加</span>
        <span @click="closeModal">
          <svg class="closeIcon" width="15" height="15" viewBox="0 0 50 50">
            <path
              d="M 0 0 L 50 50"
              fill="none"
              stroke="var(--nature-color-1)"
              stroke-width="5"
              stroke-linecap="round"
            />
            <path
              d="M 50 0 L 0 50"
              fill="none"
              stroke="var(--nature-color-1)"
              stroke-width="5"
              stroke-linecap="round"
            />
          </svg>
        </span>
      </div>

      <!-- Form -->
      <div class="modal-content">
        <div class="form-control">
          <input type="value" required="true" v-model="form.name" />
          <label>
            <span> Name </span>
          </label>
        </div>
        <div class="form-control">
          <input
            type="value"
            required="true"
            v-model="form.url"
            @blur="getFavicon"
          />
          <label>
            <span> URL</span>
          </label>
        </div>
        <div class="preview-image">
          <img :src="form.icon" height="50" class="preview" alt="" />
        </div>
        <div class="preview-image">
          <button class="btn" @click="confirm">确 认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { getStorageData, setStorageData } from "../../../Background/storage";
import { EStorageKey, IShortcut } from "../../../utils";

const emit = defineEmits(["close"]);

const closeModal = () => {
  emit("close", false);
};

// const bookMarkList = ref<chrome.bookmarks.BookmarkTreeNode[]>([]);
// const getBookMarks = async () => {
//   // 获取书签栏
//   const books = (await chrome.bookmarks.getSubTree("1")).find(
//     (item) => item.id === "1"
//   );
//   if (!books) return;
//   books.children && (bookMarkList.value = books.children);
//   console.log(books);
// };

const form = ref<IShortcut>({
  name: "",
  url: "",
  icon: "",
});
const getFavicon = () => {
  try {
    const urlObj = new URL(form.value.url);
    form.value.icon = `${urlObj.origin}/favicon.ico`;
  } catch (error) {}
};
const confirm = async () => {
  const { name, url, icon } = form.value;
  if (!name || !url || !icon) return;
  let localData = await getStorageData(EStorageKey.shortcut);
  if (!localData) {
    localData = [];
  }
  const result = await setStorageData(EStorageKey.shortcut, [
    ...localData,
    form.value,
  ]);
  if (!result) {
    return alert("添加失败");
  }
  closeModal();
};
</script>

<style lang="scss" scoped>
@import "../../style/function.scss";
.modal-wrap {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  .modal-header {
    display: flex;
    justify-content: space-between;
    padding: size();
    .closeIcon {
      cursor: pointer;
      &:hover {
        path {
          stroke: var(--primary-color);
        }
      }
    }
  }
  .modal-container {
    background-color: var(--nature-bg-1);
    border-radius: size();
  }
  .modal-content {
    padding: size();
    min-width: 20vw;

    .form-control {
      position: relative;
      padding: 0px size();
      input {
        background-color: transparent;
        border: 0;
        border-bottom: 2px var(--primary-color) solid;
        display: block;
        width: 100%;
        padding: size();
        font-size: size(l);
        color: var(--nature-color-1);
        &:focus,
        &:valid {
          outline: 0;
          border-bottom-color: var(--primary-color);
        }
      }
      label {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: size();
        pointer-events: none;
        span {
          display: inline-block;
          font-size: size(l);
          color: var(--nature-color-1);
          transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
      }
    }
    .form-control + .form-control {
      margin-top: size(2);
    }

    .form-control input:focus + label span,
    .form-control input:valid + label span {
      color: var(--primary-color);
      transform: translateY(size(-2));
    }
    .preview-image {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: size();
      img {
        margin: size() 0px;
      }
      .btn {
        width: 100%;
        padding: size(0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--primary-color);
        color: var(--nature-color-1);
        outline: none;
        border-radius: size(0.5);
        border: 0px;
        cursor: pointer;
        transition: animate(all, bounce);
        &:hover {
          transform: scale(0.95);
        }
      }
    }
  }
}
</style>
